<!-- 	role table을 jqgrid를 이용하여 출력 
		기능 :
		1) add, edit, delete, search, refresh 등 navgrid 사용 
 		2) pager를 이용한 record, page 정보 출력      -->
 		
 		

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SM Team Development</title>


<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/jquery-ui-1.10.3.custom.css" />

<script src="jqgrid/js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="jqgrid/js/i18n/grid.locale-kr.js" type="text/javascript"></script>

<style type="text/css">

#total {
	position:absolute;
	width:1550px;
	height:770px;
	z-index:1;
	top: 3px;
	left: 5px;
}

#tabmenu {
	position:absolute;
	width:1200px;
	height:80px;
	z-index:2;
	left: 150px;
	top: 10px;
	text-align:center;
}

#menu {
	position:absolute;
	width:200px;
	height:510px;
	z-index:4;
	left: 25px;
	top: 148px;
}
#body {
	position:absolute;
	width:1500px;
	height:600px;
	z-index:5;
	left: 15px;
	top: 105px;
}
#bottom {
	position:absolute;
	width:1500px;
	height:40px;
	z-index:6;
	left: 15px;
	top: 720px;
	text-align: center;
	font-family: arial;
	font-size: 13px;
}

#inner {
	position:absolute;
	width:1450px;
	height:550px;
	z-index:7;
	left: 25px;
	top: 26px;
}
#left {
	position:absolute;
	width:400px;
	height:277px;
	z-index:8;
	left: 23px;
	top: 61px;
}
#right {
	position:absolute;
	width:400px;
	height:274px;
	z-index:9;
	left: 566px;
	top: 60px;
	text-align:right;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#down {
	position:absolute;
	width:500px;
	height:32px;
	z-index:10;
	left: 19px;
	top: 356px;
}


#center {
	position:absolute;
	width:683px;
	height:389px;
	left: 200px;
	top: 65px;
	text-align:left;
}
</style>

<script type="text/javascript">

/*  그리드 출력 스크립트 S */ 
 
 jQuery(document).ready(function(){
		jQuery("#list2").jqGrid('GridUnload');
		jQuery("#list2").jqGrid({
		   	url:'output_test2.jsp',
			datatype: "json",
		   	colNames:['RID','R_NAME', '설명'],
		   	colModel:[
		   		{name:'RID',index:'RID', width:90,editable : true},
		   		{name:'R_NAME',index:'R_NAME', width:100,editable : true},
		   		{name:'R_DESCRIPTION',index:'R_DESCRIPTION', width:250, sortable: false,editable : true}
		   	],
		   	rowNum:10,
		   	rowList:[10,20,30],
		   	rownumbers: true ,
		   	pager: '#pager2',
		   	sortname: 'RID',
		    viewrecords: true,
		    sortorder: "desc",
		    caption:"Role Table",
		    height : "100%",
		    editurl : "role_conn.jsp"
		});

/*  그리드 출력 스크립트 E */ 
		
/* navGrid 출력 S */

		jQuery("#list2").jqGrid( 'navGrid', '#pager2',
				{
			edittext : "",
			edittitle : "Edit selected row",
			
			addtext : "",
			addtitle : "Add new row",
			
			deltext : "",
			deltitle : "Delete selected row",
			
			searchtext : "",
			searchtitle : "Find records",
			
			refreshtext : "",
			refreshtitle : "Reload Grid",
			
			alertcap : "Warning",
			alerttext : "Please, select row",
			
			viewtext : "",
			viewtitle : "View selected row"
		}, //options
				{
					editCaption : "Edit Record",
					bSubmit : "전송",
					bCancel : "취소",
					bClose : "Close",
					saveData : "Data has been changed! Save changes?",
					bYes : "Yes",
					bNo : "No",
					bExit : "Cancel",
					closeAfterEdit : true,
					reloadAfterSubmit : false
				}, // edit options

				{
					addCaption : "Add Record",
					bSubmit : "전송",
					bCancel : "취소",
					clearAfterAdd : true,
					processData : "Processing...",
					height : 280,
					closeAfterAdd : true,
					reloadAfterSubmit : false
				}, // add options

				{
					caption : "Delete",
					msg : "Delete selected record(s)?",
					bSubmit : "전송",
					bCancel : "취소",
				}); // del options
	});

 /* navGrid 출력 E */
 
</script>


</head>
<body>

<!--  div태그를 이용한 layout 설정 S -->

<div id="total">

		<div id="tabmenu">
    			<c:import url="tabmenu.jsp" />
		</div>
  
		<div id="body">
		<div id="inner">
				<div id="center">
 					<table id="list2"></table>
					<div id="pager2"></div>
				</div>
		  </div>
		  <br> 
		</div>

		<div id="bottom">
				<c:import url="footer.jsp" />
		</div>
</div>

<!--  div태그를 이용한 layout 설정 E -->

</body>
</html>